<template>
  <div class="commodityUpload">
    <el-form :model="form" ref="form" label-width="200px" class="demo-ruleForm">
      <el-row>
        <typeForm :formList="form.normalForm" @input="changelist" @change="changelist" @sendType="addToData"
          :pno="gt_pno" :name="gt_name" />
      </el-row>
      <el-row>
        <normalForm :formList="form.normalForm" @input="changelist" @change="changelist" />
      </el-row>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="uploadData" class="upload" plain>提交信息</el-button>
      <el-button type="warning" @click="resetForm" plain class="clean">清空输入</el-button>
      <el-button type="info" @click="returnTo" plain>返回首页</el-button>
    </div>
  </div>
</template>

<script>
  import typeForm from "../../../components/GoodsComponent/GoodsTypeSearch.vue"
  import normalForm from "../../../components/GoodsComponent/GoodsForm.vue"
  import { commodityAdd, commodityEdit } from "../../../http/apis/goodsApi/commodity.js";

  import { mapState } from 'vuex'

  export default {
    components: {
      typeForm,
      normalForm
    },
    data() {
      return {
        form: {
          normalForm: [{
            id: 0,
            name: '商品名称',
            data: '',
          }, {
            id: 1,
            name: '商品图',
            type: "pic"
          }, {
            id: 2,
            name: '规格',
            data: '',
          }, {
            id: 3,
            name: '型号',
            data: '',
          }, {
            id: 4,
            name: '成本',
            data: '',
          }, {
            id: 5,
            name: '售价',
            data: '',
          }, {
            id: 6,
            name: '商品库存',
            data: '',
          }, {
            id: 7,
            name: '库存预警值',
            data: '',
          }, {
            id: 8,
            name: '商品备注',
            data: '',
          }, {
            id: 9,
            name: '商品排序',
            data: '',
          },
          ],
        },
        gt_pno: '',
        gt_name: '',
        gt_id: 0,
        goods_id: 0
      };
    },
    computed: {
      ...mapState('goodsStore', ['ADType']),
    },
    methods: {
      // 复制数据到data
      addToData(gt_id, gt_pno, gt_name) {
        this.gt_id = gt_id;
        this.gt_pno = gt_pno;
        this.gt_name = gt_name
      },
      // 修改表单数据
      changelist(list) {
        this.form.normalForm = list
      },
      // 上传信息
      uploadData() {
        let data = {
          "goods_barcode": this.form.normalForm[3].data,
          "goods_cost": parseInt(this.form.normalForm[4].data * 1000),
          "goods_descript": this.form.normalForm[2].data,
          "goods_id": this.goods_id,
          "goods_name": this.form.normalForm[0].data,
          "goods_pic": this.form.normalForm[2].data,
          "goods_price": parseInt(this.form.normalForm[5].data * 1000),
          "goods_sort": parseInt(this.form.normalForm[9].data),
          "goods_state": this.form.normalForm[8].data,
          "goods_status": 0,
          "goods_unit": parseInt(this.form.normalForm[6].data),
          "goods_warn_number": parseInt(this.form.normalForm[7].data),
          "gt_id": this.gt_id
        }
        if (this.ADType == 'add') {
          commodityAdd(data)
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "信息添加成功",
                  showClose: true,
                })
                this.$router.push('/goods/commodity/commodityMsg')
              }
            })
            .catch((err) => {
              console.log("请求失败", err);
              this.$message({
                type: "error",
                message: "请求失败，请稍后再试",
                showClose: true,
              });
            });
        } else if (this.ADType == 'edit') {
          console.log(data)
          commodityEdit(data)
            .then((res) => {
              console.log("成功请求:", res.data.code);
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "信息修改成功",
                  showClose: true,
                })
                this.$router.push('/goods/commodity/commodityMsg')
              }
            })
            .catch((err) => {
              console.log("请求失败", err);
              this.$message({
                type: "error",
                message: "请求失败，请稍后再试",
                showClose: true,
              });
            });
        }
      },
      // 清空条件
      resetForm() {
        this.gt_pno = ''
        this.gt_name = ''
        for (let key in this.form.normalForm) {
          this.form.normalForm[key].data = ''
        }
      },
      // 返回首页
      returnTo() {
        this.$confirm('即将返回首页，所做的操作无法保存, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.$router.push('/goods/commodity/commodityMsg')
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消跳转",
            showClose: true,
          });
        });
      }
    },
    created() {
      if (this.ADType == "edit") {
        let msg = this.$route.query.editmsg
        if (msg.gt_pno == '无') {
          this.gt_pno = msg.gt_name
          this.gt_name = ''
        } else {
          this.gt_pno = msg.gt_pno
          this.gt_name = msg.gt_name
        }
        this.gt_id = msg.gt_id
        this.goods_id = msg.goods_id
        this.form.normalForm[0].data = msg.goods_name
        // this.form.normalForm[1].data = msg.goods_pic
        this.form.normalForm[2].data = msg.
          goods_descript
        this.form.normalForm[3].data = msg.goods_bardata
        this.form.normalForm[4].data = msg.goods_cost
        this.form.normalForm[5].data = msg.goods_price
        this.form.normalForm[6].data = msg.goods_unit
        this.form.normalForm[7].data = msg.goods_warn_number
        this.form.normalForm[8].data = msg.goods_state
        this.form.normalForm[9].data = msg.goods_sort
        console.log('edit', typeof this.gt_pno, this.gt_name)
      }
    }
  };
</script>

<style>
  .commodityUpload {
    margin-top: 50px;
  }

  .commodityUpload>.el-form {
    margin-left: 10%;
  }

  .btn {
    text-align: center;
  }

  .upload,
  .clean {
    margin: 50px 100px 0 0;
  }
</style>